今天遇到这个微信浏览器下视频会全屏播放的问题。
直接给出最终解决方案:

<video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill"></video>

解释几个关键属性:

  1. playsinline:设置ios在微信中内联播放视频
  2. x5-playsinline:设置android在微信中内联播放视频
  3. x-webkit-airplay:设置允许设备播放
  4. webkit-playsinline="":设置支持内联视频播放,但需要在Obj-C里,webview设置allowsInlineMediaPlayback属性为YES【貌似Objective-C指的是ios那边但webview,所以这个属性单独设置没生效,可以不用加】
  5. object-fit:fill:这个属性类似背景图片的设置,fill代表填充,意为将视频宽高比例改变,以适应铺满容器大小

参考
腾讯h5同层播放器接入规范:https://x5.tencent.com/tbs/gu...


东理阳阳
4 声望0 粉丝